<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <style type="text/css">
		  #oval {
		    width: 200px;
		    height: 100px;
		    background: red;
		    -moz-border-radius: 100px / 50px;
		    -webkit-border-radius: 100px / 50px;
		    border-radius: 100px / 50px;
		}
  		.mytd{border:1px solid silver}
  		.mytd2{border:1px solid white}
        body, button, input, select, textarea
        {
            font: 14px/1.5 tahoma,arial,宋体;
            background-image:url(text.txt);/* for IE6 */
            background-attachment:fixed;/* for IE6 */            
        }
        #tstart-toolbar-top
        {
            top:0;/*最上*/             
            color: #3E3E3E;
            right: 0;
            position: fixed;
            text-align: left;
            width: 100%;
            z-index: 10000;
            _position:absolute; /* for IE6 */
            _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */
            overflow:visible;
        }
        #tstart-toolbar-top .tstart-right
        {
            float: right;/*在右*/             
            margin: 5px 5px 5px 5px;
            padding: 10px;
            border: 0px solid silver;
            background-color:white;           
            box-shadow: 0px 0px 5px #000;
            -moz-box-shadow: 0px 0px 5px #000;
            -webkit-box-shadow: 0px 0px 5px #000;
        }
        #tstart-toolbar-bottom
        {
            position: fixed;/*固定*/
            bottom: 0;/*在最下*/
            color: #3E3E3E;
            left: 0;
            text-align: left;
            width: 100%;
            z-index: 10000;
            _position:absolute; /* for IE6 */
            _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */
            overflow:visible;
        }
        #tstart-toolbar-bottom .tstart-left
        {
            float: left;/*在左*/             
            width: 400px;
            margin: 5px 5px 5px 5px;
            padding: 5px;
            border: 0px solid silver;
            background-color:white;
            /*椭圆与阴影*/
            box-shadow: 0px 0px 5px #000;
            -moz-box-shadow: 0px 0px 5px #000;
            -webkit-box-shadow: 0px 0px 5px #000;
        }
        #tstart-toolbar-bottom .tstart-right
        {
            float: right; /*在右*/
            width: 400px;
            margin: 5px 5px 5px 5px;
            padding: 5px;
            border: 0px solid silver;
            background-color:white;
            
            box-shadow: 0px 0px 5px #000;
            -moz-box-shadow: 0px 0px 5px #000;
            -webkit-box-shadow: 0px 0px 5px #000;
        }
    </style>

<script type="text/javascript">

	function ViewEOTable(orderTmp)
	{
		var EOValTmp=document.getElementById("EOVal").value;
		
		if (EOValTmp>0)
		{		
			var daTmp=myExamDaSelect[EOValTmp];		
			if (daTmp!='&nbsp;' && daTmp!=' ' && daTmp!='') {document.getElementById('EOV'+EOValTmp).className='ExamOrderViewVisited';} else {document.getElementById('EOV'+EOValTmp).className='ExamOrderViewWait';}
		}
		
		document.getElementById('EOV'+orderTmp).className='ExamOrderViewHover';
		document.getElementById("EOVal").value=orderTmp;
	}
	// 转换为数字
	function intval(v)
	{
		v = parseInt(v);
		return isNaN(v) ? 0 : v;
	}
	// 获取元素信息
	function getPos(eo)
	{
		var l = 0;
		var t  = 0;
		var w = intval(eo.style.width);
		var h = intval(eo.style.height);
		var wb = eo.offsetWidth;
		var hb = eo.offsetHeight;
		while (eo.offsetParent)
		{
			l += eo.offsetLeft + (eo.currentStyle?intval(eo.currentStyle.borderLeftWidth):0);
			t += eo.offsetTop  + (eo.currentStyle?intval(eo.currentStyle.borderTopWidth):0);
			eo = eo.offsetParent;
		}
		l += eo.offsetLeft + (eo.currentStyle?intval(eo.currentStyle.borderLeftWidth):0);
		t  += eo.offsetTop  + (eo.currentStyle?intval(eo.currentStyle.borderTopWidth):0);
		return {x:l, y:t, w:w, h:h, wb:wb, hb:hb};
	}
	// 获取滚动条信息
	function getScroll()
	{
		var t, l, w, h;
		if (document.documentElement && document.documentElement.scrollTop) 
		{
			t = document.documentElement.scrollTop;
			l = document.documentElement.scrollLeft;
			w = document.documentElement.scrollWidth;
			h = document.documentElement.scrollHeight;
		}
		else if (document.body)
		{
			t = document.body.scrollTop;
			l = document.body.scrollLeft;
			w = document.body.scrollWidth;
			h = document.body.scrollHeight;
		}
		return { t: t, l: l, w: w, h: h };
	}	
	
	// 锚点(Anchor)间平滑跳转
	function scroller(el, duration)
	{       firefoxel=el;
		if(typeof el != 'object') { el = document.getElementById(el); }
		if(!el) { el = document.getElementsByName(firefoxel).item(0)}
	        if(!el) return;
		var z = this;
		z.el = el;
		z.p = getPos(el);
		z.s = getScroll();
		z.clear = function(){window.clearInterval(z.timer);z.timer=null};
		z.t=(new Date).getTime();
		z.step = function(){
		var t = (new Date).getTime();
		var p = (t - z.t) / duration;
		if (t >= duration + z.t) {
		z.clear();
		window.setTimeout(function(){z.scroll(z.p.y, z.p.x)},13);
		} else {
		st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t;
		sl = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.x-z.s.l) + z.s.l;
		z.scroll(st, sl);
		}
		};
		z.scroll = function (t, l){window.scrollTo(l, t)};
		z.timer = window.setInterval(function(){z.step();},13);
	}	

	function hiddenAnswer() {
		var selectnum = <s:property value="exam.questions.size" /> - 0;		
		for ( var i = 0; i < selectnum; i++) {
			var answerDiv = document.getElementById('correctAnswer'+ (i + 1));
			answerDiv.style.display = "none";
		}
		hiddenDIV('hiddenCorrectAnswerDiv');
		showDIV('showCorrectAnswerDiv');
	}
	function showAnswer(){
		var selectnum = <s:property value="exam.questions.size" /> - 0;		
		for ( var i = 0; i < selectnum; i++) {
			var answerDiv = document.getElementById('correctAnswer'+ (i + 1));
			answerDiv.style.display = "block";
		}
		showDIV('hiddenCorrectAnswerDiv');
		hiddenDIV('showCorrectAnswerDiv');
	}
	function setLinkStatus(index){
		var choiceRadios = document.getElementsByName('choice' + index);
		var answered = false;
		for ( var i = 0; i < choiceRadios.length; i++) {
			if (choiceRadios[i].checked) {
				answered = true;
				break;
			}
		}
		if(answered){
			document.getElementById('quesLink'+index).style.backgroundColor='#eeeeee';
		}else{
			document.getElementById('quesLink'+index).style.backgroundColor='#ffffff';
		}
	}
	function doit() {
		var score = 0;
		var selectnum = <s:property value="exam.questions.size" /> - 0;
		var unfinishedIdStr = "";
		for ( var j = 0; j < selectnum; j++) {
			var selectAnswer = "";			
			var choiceRadios = document.getElementsByName('choice' + (j + 1));
			var correctAnswer = document.getElementById('answer' + (j + 1)).value;
			var qusType = document.getElementById('qusType' + (j + 1)).value;
			
			//single select
			if(qusType == 1){
				var questionFinished = false;
				var isAnswerCorrect = false;
				for ( var i = 0; i < choiceRadios.length; i++) {
					if (choiceRadios[i].checked) {
						selectAnswer = choiceRadios[i].value;
						questionFinished = true;
						break;
					}
				}
				
				if(correctAnswer == selectAnswer){
					isAnswerCorrect = true;
				}
				
				if(!questionFinished){
					unfinishedIdStr = unfinishedIdStr + (j+1) + ",";
				}else{
					if(isAnswerCorrect){
						score = score + 1;
						showDIV('correctReuslt'+(j+1));
						showDIV('addToHardList'+(j+1));
						hiddenDIV('wrongResult'+(j+1));
						setLinkColorBlue('quesLink'+(j+1));
					}else{
						showDIV('wrongResult'+(j+1));
						hiddenDIV('addToHardList'+(j+1));
						hiddenDIV('correctReuslt'+(j+1));
						setLinkColorRed('quesLink'+(j+1));
					}
				}
					
			}
			
			//muti select
			if(qusType == 2){
				var isAnswerCorrect = true;
				var questionFinished = false;
				var correctAnswerArray = correctAnswer.split(",");
				for ( var i = 0; i < choiceRadios.length; i++) {
					if (choiceRadios[i].checked) {
						selectAnswer = selectAnswer + choiceRadios[i].value + ",";
						questionFinished = true;
					}
				}
				var selectAnswerArray = selectAnswer.split(",");
				
				if((selectAnswerArray.length-1) == correctAnswerArray.length){
					for(var i=0;i<selectAnswerArray.length-1;i++){ 
						var foundAnswer = false;
						for(var k=0;k<correctAnswerArray.length;k++){ 
							if(correctAnswerArray[k]==selectAnswerArray[i]){
								foundAnswer = true;
								break;
							}
						}
						if(!foundAnswer){
							isAnswerCorrect = false;
							break;
						}
					} 									

				}else{
					isAnswerCorrect = false;
				}
				
				if(!questionFinished){
					unfinishedIdStr = unfinishedIdStr + (j+1) + ",";
				}else{
					if(isAnswerCorrect){
						score = score + 1;
						showDIV('correctReuslt'+(j+1));
						hiddenDIV('wrongResult'+(j+1));
						setLinkColorBlue('quesLink'+(j+1));
					}else{
						showDIV('wrongResult'+(j+1));
						hiddenDIV('correctReuslt'+(j+1));
						setLinkColorRed('quesLink'+(j+1));
					}
				}

			}

		}
		
		//there is some question not finished
		if(unfinishedIdStr.length>0){			
			
			if(window.confirm('Some question unfinished, are you sure you want to submit now?')){ 
				var unfinishedIdArray = unfinishedIdStr.split(",");
				window.location.hash = 'anchor'+unfinishedIdArray[0]; 
				for(var k=0; k<unfinishedIdArray.length-1;k++){
					showUncompletedInfo(unfinishedIdArray[k]);
				}
				
				showDIV('redoDiv');
				showDIV('showCorrectAnswerDiv');
				hiddenDIV('submitDiv');
				
				//var button2 = document.getElementById('submit');
				//button2.style.border="";
				//button2.style.backgroundColor="";
				
				alert("Your score is "+ score);		
			}else{ 
				//do nothing
			} 			

		}else{
			showDIV('redoDiv');
			showDIV('showCorrectAnswerDiv');
			hiddenDIV('submitDiv');
			
			alert("Your score is "+ score);		
		}
		
	}
	
	function setLinkColorBlue(id){
		document.getElementById(id).style.color='blue'; 
	}
	
	function setLinkColorRed(id){
		document.getElementById(id).style.color='red'; 
	}	
	
	function hiddenUncompletedInfo(index){
		hiddenDIV('uncompletedInfo'+index);
	}
	function showUncompletedInfo(index){
		showDIV('uncompletedInfo'+index);
	}	
	function hiddenDIV(divId){
		document.getElementById(divId).style.display='none'; 
	}
	function showDIV(divId){
		document.getElementById(divId).style.display='block'; 
	}	
</script>
</head>
<body topmargin="15px" leftmargin="15px" rightmargin="15px">
	<form method="post" name="form">   
		
	<font><b><s:property value="exam.name" />(<s:property value="exam.shortName" />)</b></font> <br /><br/>
		
	<s:iterator value="exam.questions" id="ques" status="status" >	
		<s:if test="%{#status.count%2==0}">
			<div style="width:1000px;float:left;padding:5px 5px 5px 5px;border:1px;border-color:#f5f5f5;border-style:solid;" >
		</s:if>
		<s:else>
			<div style="width:1000px;float:left;background-color:#fcfcfc;padding:5px 5px 5px 5px;border:1px;border-color:#fafafa;border-style:solid;">
		</s:else>	    
			<b><s:property value="#status.count" />.</b> <s:property value="#ques.content" />		
			<a id=anchor<s:property value='#status.count'/> ></a>	
			<input type="hidden" id=answer<s:property value='#status.count'/> value=<s:property value='#ques.correctAnswer'/> />
			<input type="hidden" id=qusType<s:property value='#status.count'/> value=<s:property value='#ques.questionType'/> />
			<br/>
			<s:if test="%{#ques.questionType==1}">
			    <!-- Single Select Type -->
				<s:iterator value="#ques.choices" id="choice" >
					<input 
						type="radio" 
						id='choice<s:property value='#status.count'/><s:property value='#choice.choiceTitle'/>' 
						name=choice<s:property value='#status.count'/>  
						onclick="hiddenUncompletedInfo(<s:property value='#status.count'/>); setLinkStatus(<s:property value='#status.count'/>); "
						value=<s:property value='#choice.choiceKey'/> 
					/>
					<label style="cursor:pointer;" for='choice<s:property value='#status.count'/><s:property value='#choice.choiceTitle'/>'>
						<s:property value='#choice.choiceTitle'/>.&nbsp;<s:property value="#choice.choiceContent" />
					</label>
					<br />
				</s:iterator>
			</s:if>
			<s:elseif test="%{#ques.questionType==2}">
				<!-- Multi Select Type -->
				<s:iterator value="#ques.choices" id="choice" >
					<input 
						type="checkbox" 
						id='choice<s:property value='#status.count'/><s:property value='#choice.choiceTitle'/>' 
						name=choice<s:property value='#status.count'/> 
						onclick="hiddenUncompletedInfo(<s:property value='#status.count'/>) ; setLinkStatus(<s:property value='#status.count'/>);"
						value=<s:property value='#choice.choiceKey'/> 
					/>
					<label style="cursor:pointer;" for='choice<s:property value='#status.count'/><s:property value='#choice.choiceTitle'/>'>
						<s:property value='#choice.choiceTitle'/>.&nbsp;<s:property value="#choice.choiceContent" />
					</label>
					<br />
				</s:iterator>
			</s:elseif>
			<div style="display:none" id="uncompletedInfo<s:property value='#status.count'/>" >
				<font color=blue><b>*</b> Please choose an answer to the question.</font>
			</div>
			<div style="display:none" id="correctAnswer<s:property value='#status.count'/>" >
				<font color=blue><b>*</b> Correct answer is: <b><s:property value='#ques.correctAnswerTitle'/></b></font>
			</div>		
		</div>
		
		<div index=9999 id="correctReuslt<s:property value='#status.count'/>" style="display:none;float:left;position: relative; text-align: center; left:-400px;top: 10px; width:50px;height:20px;">
			<font size=24px color=blue>√</font>
		</div>
		<div index=9999 id="addToHardList<s:property value='#status.count'/>" style="display:none;float:left;position: relative; text-align: center; left:-200px;top: 50px; border:0px;padding:0px 0px 0px 0px; width:100px;height:20px;">
			<a href="" onclick="">Mark it hard</a>
		</div>		
		<div index=9999 id="wrongResult<s:property value='#status.count'/>" style="display:none;float:left;position: relative; text-align: center; left:-400px;top: 10px; width:50px;height:20px;">
			<font size=24px color=red>✗</font>
		</div>		
		
		
	</s:iterator>
		
	 <div id="tstart-toolbar-top">
        <div class="tstart-right">
            <table cellspacing="0" cellpadding="2" border="0" bgcolor="#F7F7F7"  id="idboxs" class="idbox" style="BORDER-COLLAPSE: collapse; ">
			    <tbody>
			    	<tr bgcolor="#FFFFFF" align="center">
			    		
				    	<s:iterator value="indexs" id="index" status="status" >
				    	
				    	<s:if test="%{#status.count>1 && #status.count%10==1}">
							</tr><tr bgcolor="#FFFFFF" align="center">							
						</s:if>
					     
					     <s:if test="%{#index>0}">
					     	<td onclick="scroller('anchor<s:property value='#status.count'/>',1);" style="cursor:pointer;" class="mytd" id="quesLink<s:property value='#status.count'/>"><s:property value='#status.count'/></td>
					     </s:if>
					     <s:else>
					    	<td  id="quesLink<s:property value='#status.count'/>" >&nbsp;</td>
					     </s:else>
				        </s:iterator>
			        </tr>
			        <tr bgcolor="#FFFFFF" align="center">
			        </tr>
			    </tbody>
			</table>
			<br/>
			<table cellspacing="0" cellpadding="0" border="0"  id="infobox"  >
				<tr align="center" >
					<td width=5px style="">&nbsp;</td>
					<td width=16px >
						<div style="position:relative;width:10px;height:10px;border:1px;background:#eeeeee;border-color:silver;border-style:solid;"> </div>
					</td>
					<td colspan=3  >&nbsp;Answered</td>
					<td width=5px  style="">&nbsp;</td>
					<td width=16px>
						<div style="position:relative;width:10px;height:10px;border:1px;border-color:silver;border-style:solid;"> </div>
					</td>
					<td colspan=3  >&nbsp;Unanswered</td>
				</tr>
			</table>
        </div>
     </div>
    <div id="tstart-toolbar-bottom">
        <div class="tstart-right">
            <center>
				<div style="display:none;float:right;position: relative; padding-right:5px;" id="showCorrectAnswerDiv">
					<input type="button" id="showCorrectAnswer" style="cursor:pointer;border:1px;border-color:#dddddd;border-style:solid; background-color: #eeeeee;" value="Show Correct Answers"  onclick="showAnswer();" /> 
				</div> 
				<div style="display:none;float:right;position: relative; " id="hiddenCorrectAnswerDiv">
					<input type="button" id="hiddenCorrectAnswer" style="cursor:pointer;border:1px;border-color:#dddddd;border-style:solid; background-color: #eeeeee" value="Hide Correct Answers"  onclick="hiddenAnswer();" /> 
				</div>             
            	<div style="display:block;float:right;position: relative; padding-right:100px;" id="submitDiv">
					<input type="button" id="submit" style="cursor:pointer;border:1px;border-color:#dddddd;border-style:solid; background-color:#eeeeee;" value="Submit" onclick="doit()" /> 
				</div>             
            	<div style="display:none;float:right;position: relative; padding-right:5px;" id="redoDiv">
					<input type="button" id="redo" style="cursor:pointer;border:1px;border-color:#dddddd;border-style:solid; background-color:#eeeeee;" value="Test Again" onclick=" window.location.reload();" /> 
				</div> 
			</center>
        </div>
    </div>

	</form>		    
</body>
</html>